I'm trying to work with the nice parallax effect in this template. It seems to work well with all browsers except mobile Safari (unusually)!
http://wrapbootstrap.com/preview/WB002R8U1
Look at the ABOUT and FOURTH sections on an iPad and the background image goes missing (presumably because it's stuck to the top of the page behind the other elements.
Anyone know a workaround for this?
Many thanks.
parallax on mobile iOS is not that easy: safari blocks all rendering while scrolling (for performance boosting), therefore you can't measure the current scrolled distance and apply it to the background position. the picture would only refresh it's position when you've finished scrolling (and without animation, so you wouldn't see anything of it).
There are workarounds but they're not as easy to implement. one of them is http://markdalgleish.com/projects/stellar.js/ with its iOS techdemo.
Best solution: split your css markup and let parallax only be visible to desktop devices. As parallax needs a lot of power (because it's not hardware accelerated), it's not very suitable for mobile devices anyway.
Related
It's weird iOS bug time again. I've got a header that's set to around 70vh, and (for the most part) it works well. It used to be buggy in iOS Safari but they seem to have fixed it. Apart from when you rotate the screen. It seems to double every time you rotate the viewport. 70vh becomes 140vh, then 210vh and so on.
I don't know if there's anything I can change in the CSS or on the meta viewport tag that will stop this? I'll even look entertain Javascript solutions if that's the only way around it.
Here's the site I'm referencing. All the code is on github if that's your thing.
I've seen this question before, but the answer is evading me. There are four images on the front-page of the site http://miraishii.com. The top image, in the section displays fine, but the three within the second section don't. They are assigned images with id's gal-1, gal-2, gal-3.
The images display fine in desktop browsers, but neither iOS Safari nor iOS chrome will display the background-images. I'm using the Safari inspector to view the site, the images seem to be loading, but not displaying.
It is probably because fixed background images do not yet work in iOS yet. See How to replicate background-attachment fixed on iOS and see does a background-attachment of fixed work in iOS5?
My suggestion would be to use a media query to target mobile and do the background image in the boring way (just for smaller screens). My understanding is if you want fixed background position on mobile right now, you're going to be doing some hairy polyfills. I am sure the situation will improve over time.
I'm working on an animation using packery. Tiles are aligned in a grid and clicking on one is supposed to enlarge it and dynamically rearrange the tiles accordingly. The resizing is animated using CSS3 transitions. All of this works as expected in IE10 and Firefox, as demonstrated in the following codepen: http://codepen.io/anon/pen/ilkmK
The same code in WebKit-based browsers (tested on Windows) produces a frantic wiggle / shaking of the box as it is resized and repositioned.
I already submitted an issue and the problem seems to be that width and height transitions in WebKit are not optimized. Implementing the same animation using jQuery.animate improved the situation a little bit, but it doesn't get rid of the wiggle. Especially on slower systems it remains very noticable.
For now I'm using the JavaScript version as a slightly better fallbackf or webkit browsers, but it's not optimal. I have no idea where to go from here, so I was hoping Stackoverflow could help me out.
For any hints on how to make this work in Chrome/Safari, I'd be very grateful.
I just tried this in Chrome on mac and it's working fine, so I can't replicate the problem. However I have a feeling this might be to do with the fact that when webkit browsers load a page they initially generate images with 0 dimensions.
Try putting your jQuery in $(window).load(function(){ instead of $(document).ready(function(){
That would wait for images to load before executing the script.
I'm facing a problem I can't figure out how to solve. I'm almost sure this is a Chrome bug since in other browsers it works like a charm but I want to be sure. On my website, developed using a mobile first and responsive design approach, I have a menu that uses the Left Nav Flyout pattern. On Tablets and desktops, I show it full width.
When I load the website on my smartphone (specifically an Android device) using Chrome in Portrait mode, once I rotate the device (passing in Landscape mode) and start to scroll the page, as soon as I reach the menu position, the latter magically disappears. What is really strange is that if you try to click the space that now is completely white, you can see that the links are actually there. I tried to use the inspector to find the problem but didn't succeed.
So, wow can I solve the problem? Anyone else had this issue before? If you know it's a bug, I'm glad to add a temporary workaround as well.
I didn't find a real solution but a reasonable workaround. Of course, I still hope that someone will explain what's the cause of this issue and how to solve it.
In the meantime, I found that the problem occurs because the menu, 240px wide, is completely out of the viewport. In fact, as soon as I changed the margin-left to 239.5px the menu didn't disappear anymore.
I am trying to make my mobile site accessible to as many browsers as possible, and I noticed when using the opera mini simulator (http://www.opera.com/mobile/demo/) that it doesn't support css background position - which I'm using to display a sprite for all of my site images. Are there any workarounds for this?
There has to be something else that keeps your code from working, because Opera Mini 6 does actually support background position.
Th website of the company that I am working for uses background position in some places, for example to change the color of the active menu button, and that works just fine. On the other hand there is some other rendering problem that makes it only show part of the button, but that part is the right color...