Hello, i’m having a bug on Safari 10 on iPad (and some mac devices). As far as I see, meta info boxes appear to have a forced low height, with child content overflowing and covering what’s below.
You can see it here: http://www.excellencemagazine.luxury
Inspecting the element, it looks like the display:flex property is causing the problem.
Am I the first one noticing this, or otherwise, in which way has it been solved so far?
Landscape: https://tinyurl.com/yamkvx26
Portrait: https://tinyurl.com/ya6x9v6t
Hello lukferroni90,
Please notice that we have tested your website for more Ios devices and it seems to work as expected, without any problem, sorry! Try again, clear all of your caches, browser caches and check the results.
Thanks for the message!
We double-checked to be sure that browser cache was clear, before reporting it, also inspecting with the debugger, in order to try not to waste your time.
Please find the video where we show that we clear the device’s cache and the problem persists. https://tinyurl.com/y79p4w2c
Thanks, regards
Hello lukferroni90,
I have tested again your website and I did not saw any errors. Please check here ->
https://www.screencast.com/t/X8RdlcHHf -> https://www.screencast.com/t/cIC6iJNNxr -> https://www.screencast.com/t/i4VQaAyizDQ
Thanks for your understanding!
It looks like you’re not using the same device.
To reproduce the error and the bug shown in printscreen previously attatched:
iPad 4
iOs 10.3.3
Safari 10.1.1
You can notice -also- on emulator on crossbrowsertesting.com, like in this screenshot
https://tinyurl.com/y7dx645o
Thanks for your understanding, too.
if it can help you, would appear to be patched (patched, not solved) applying css
Patch NOT APPLIED in order to let you see the bug, just to hel pyou focusing the problem.
.td_block_wrap:not(.horizontal-swap) .td-module-meta-info {
flex-shrink:0!important;
}
Hope it helps to fix the problem.
Hello lukferroni90,
Unfortunately, please keep in mind that we have made some tests on iPad 2 with iOS 12.0.1. Please update the operating system!
Thanks.
I do, but my user won’t right here and right now. As far as I had to take care of the bug by myself, here I post the solution, hoping it will be useful for others.
On Custom CSS, add:
.td_block_wrap:not(.horizontal-swap) .td-module-meta-info { flex-shrink:0!important; }
On advanced CSS under tablet portrait and mobile, add:
.td_module_wrap.td-meta-info-hide .td-module-meta-info {
flex-shrink: 0;
}
