We have developed a website (only designed for mobile platforms) but we are experiencing a rare failure.
The webis in this URL https://mercadona.mandarinawebs.com
In the website you can find a menu and there is the problem.
This is how it looks in Chrome (Android)
And this is how it looks in Chrome (iOS)
As you can see, the menu is not showing in iOS.
All the animation are in webkit.
It doesn't work on iOS for safari or for chrome but it works on Chrome for Android. This is strange becouse I understood that the interpretation of the website was made by the browser not by the OS.
I suspect it has to do with some of this but I am quite lost
Thank you
There is one class (scroll-in-mobile)
that contains this:
-webkit-overflow-scrolling: touch;
Deleting this the problem is solved and it works for Android or iOS.
Related
I created a Fiddle:
https://jsfiddle.net/6zkmg2cn/
I tried to add code but it wouldn't show the HTML from the fiddle?
This fiddle works fine on a PC, but the same fiddle on a mobile browser doesn't work.
As you will see, it just flips the "front" 180 degrees but never shows the "back"
any idea what I'm doing wrong?
or does anyone know a better way to use a "flipper" animation that works on mobile devices? I just want a basic "click this and it flips" animation.
EDIT:
I'm sorry, I should have added more information:
It turns out it does work on Android Chrome and Firefox, but where I am seeing it not work is iOS Chrome (56.0.2924.79) and iOS Safari (10.1.1 iOS) and iOS FireFox (6.1)
Obviously this is something I'm missing with a -webkit flag in CSS or something? The link in the comments that show what's its compatible with suggests it should be working with these browsers, so leads me to believe its my code. Sorry again.
it was:
-webkit-backface-visibility: hidden;
that I needed to add.
Thank you guys, your comments helped me to find this answer. I appreciate it.
I started experiencing an issue with images not being displayed on my jssor carousel slider; this issue is only present on Chrome (latest Version 45.0.2454.101 m) - it works fine under Firefox, Explorer and mobile browsers.
Drilling down, it seems that user agent stylesheet adds/applies this element:
transform: perspective(2000px);
When in Chrome's Developer Tools, unchecking this style option results in image being displayed just fine.
Any help with explanation what is going on and how to deal with this issue is much appreciated.
Thank you,
Michael
I was wondering why the CSS 3d animation work on safari (desktop/ipad/iphone) browser but not on latest chrome 9.0. Aren't chrome and safari both based on the webkit platform???
Also, how can I stay in the loop with Chrome (desktop/android) browser and their plans to support CSS 3d in the future?
Link is here: http://girliemac.com/sandbox/flickr_3d.html
Thanks.
EDIT: For those of you who says it works on Chrome, can you please try it on safari? It looks like it works on Chrome but it REALLy works on the latest safari or get the nightly build.
I use chrome 9.0.597.107; chrome disable 3d animation by default.
so, if want enable it, just open a new tab, access the page : about:flags
In that page, make sure enable the GPU.
restart the chrome , then you should see the 3d animation .
i've been trying out a bit of code posted to make image rollover buttons using only css,
this seems to work fine.
local testing showed no problems, IE, Firefox, safari all ok. even chrome displays as intended on the local version.
Once i move to a hosted test, IE, Firefox and Safari all display as intended but chrome offsets all the buttons right about 8-10 pixels.
here's the test page
http://www.fierysurprise.pwp.blueyonder.co.uk/bga/bgd.html
can anyone enlighten me as to what's happening?
site built in Kompozer
I assume you're referring to the squares under the "architectural design..." phrase.
I can't recreate this problem in Chrome v5.0.375.125.
What version of chrome are you using? Chrome tends to doggedly cache resources. Have you tried a cache refresh?
What version of Chrome are you using? I looked at your site in Chrome 5 and can't seem to tell a difference between any of the browsers you've mentioned.
is there a way (through javascript/jquery/css) to hide the scrollbar in android's web browser?
Can't seem to find any valid info online and things that work for Google Chrome (webkit engine, as well) don't seem to work for the Android's browser.
Thanks bunches
Did you ever tried overflow-x/y for hiding scrollbars?