Flexbox flex-direction column bug - safari

i have a big problem in responsive website in mobile safari and mobile ie or some mobile browsers. my site its ok in chrome mobile browser, but in ie or safari flex-direction column do not work and see parts lokelike float without clear. what i do for this problem?
enter image description here
it's in true show and in mobile chrome browser
and its in ie and safari mobile browsers
enter image description here
this problem is for flex-direction:column
can see this problem in 10up.github.io/flexibility/

Related

How to access content from iframe in Safari. Not able to switch to iframe for safari browser

I am not able to switch to any iframe in safari browser.
switchTo frame is working properly for other browsers but not working in MAC safari.
Is there any way or workaround to achieve this.

In IOS mobile safari browser popup window not showing In incognito mode

I have an issue related to the popup window in a mobile safari browser. In mobile browser popup not showing but when I opened the same site in Mackbook safari browser it's showing, its also showing on the mobile app but when I opened it on the mobile safari browser it's not showing. I checked the browser settings for popup it on.

QuotaExceededError in my AMP page only in safari browser

I got QuotaExceededError in my AMP page only in safari browser.
In some Safari browser page is working perfectly, but in some safari browser, I got this error.
Even I am Checking this in normal browser page(Not in Incognito mode).
Please give me a solution if you have any idea regarding this.

Unable to share a link on whatsapp from Safari

I am trying to share a link from html on whatsapp using
SHARE
This works fine for all browsers except safari.
In safari , When the share link is present on www.example.com(I am trying to share the link of the page I am standing on) page,if I try to share the link, only title text is shared, the link is not shared.
The whats app message generated is
title
despite of title http://www.example.com
Try encoding the text parameter using encodeURIComponent.
In your case that would be:
SHARE
We usually differ link at desktop view and mobile view to offer better support for safari and other browser.
for desktop view we use
https://web.whatsapp.com/send?phone=6200000000&text=Hello%20Moxqitto
for mobile, we follow whatsapp best practice https://faq.whatsapp.com/en/android/26000030/
https://wa.me/6200000000
Tested on
Chrome for mac
safari for mac
android chrome
Ps: not tested when mac have whatsapp desktop app, but it will still work in the safari itself. so it should be ok

How to show pdf on the mobile browser?

I am using iframe to embed a pdf on my web application , it is intended to support for all device , (desktop , mobile browsers) .
The problem is , on the desktop version it show perfectly (as chrome, fx has their own viewer).
However, when I view my website on ios/ android (android almost all browser not working) (ios Safari can show the pdf but without any function (e.g. zoom) ) .
How can I handle the mobile browsers (ios safari) (android chrome, fx and default one) if I need to display the pdf instead of download? thanks
<iframe src=”a.pdf” style=”width:600px; height:500px;” frameborder=”0″></iframe>
PDF's in iframes are not cross-Browser consistent, and there is not a lot you can do about it. The user may have to scroll in some iframes on certain Browsers. You may want to consider
<a href='a.pdf'>PDF Name</a>
instead.