I am currently working on my portfolio site, and I wanted to have some kind of parallax effect. So after I researched I bit, I found rellax.js, which claims to work on mobile browsers too. But now when I view my site on a mobile browser, it is stuttering. I was wondering if this is an Issue from my site, or if it is a general problem with this plugin(even though the example site of rellax.js works perfectly fine on mobile Browsers).
Where to look (and how to recreate) for the stuttering effect: The plugin affects the Header part of the site as well as the card that is somewhat overlapping the header on scrolling. To achieve the effect just scroll the site down and up.
I hope I provided enough information about my problem. The problem can't be recreated on a site like jsfiddle or codepen, because I don't know what is causing it.
Related
This has been happening to me quite frequently and its driving me nuts. I make my website, It's completely responsive on desktop, I looked at the responsive toggle in chrome dev-tools and mozilla dev-tools. Everything is fine. I go to publish my site, everything looks good, I check the site on my phone and tablet and those are fine too. Now if my friend who has a different phone or tablet try's to access it, the images are either stretched or squeezed and do not follow the CSS properties I gave them. I have no idea why this is happening and haven't been able to find a solution yet. Any help would be greatly appreciated.
(This is not a media query issue It's mainly images getting distorted, but only on select screens)
not sure if this would help, try giving fixed width & height for small images other than header or banner images and include them in flexbox. Header or Banner images will more or less will get trimmed with respect to mobile layout.
Hi there, I'm trying to implement an infinite-scrolling blog, and have the functionality working in terms of loading and rendering. However, I'm getting jumpy performance on non-chrome browsers due to content being dynamically rendered as the user scrolls.
I found that it works perfectly in chrome due to the scroll anchoring functionality (https://developers.google.com/web/updates/2016/04/scroll-anchoring), but other browsers like safari or firefox not so much. Does anyone know how to go about emulating the scroll anchoring functionality so that the infinite scroll functionality works on all major browsers?
I really appreciate any thoughts or suggestions!
Thanks!
I have searched a lot of answers to similar questions, but nothing has fixed my issue.
Here is the site: dev.thekarmagames.com
The width and responsiveness work fine when simulating phone and iPad screens on computer, but something goes wrong when displaying directly in mobile Safari and Chrome on iOS devices.
Here is what it looks like on iOS:
I've tried manipulating CSS, editing/removing JavaScript, and experimenting with viewport settings. Nothing seems to work.
I could really need a lead that will set me in the right direction, and I'll happily share the solution with everyone once I find it.
I have been developing a website using Skrollr v.0.6.17.
During the testing, I found out that the website does not work with IOS devices. The pages on the website could not be scrolled and locked. I have implemented Skrollr to wrap all the body section, except the one with fixed positioning. It still did not work, but I found out that my video embed would allow me to scroll the page, which was strange.
The website is http://encore.andrewtaswin.com/
Could any one provide me any help in this?
Thanks.
html {height:100%}
I have to admit though that it was not obvious.
On my site, http://www.merkato.hu, the header has a fixed position. On desktop browsers, this works well - but on mobile devices, zooming the page makes the header unusable due to the fixed positioning.
I have tried a method for making the height and html absolute positioned to header and content, and overflow set to scroll - but there are scripts which need the body to be scrollable.
What is the best way to accomplish a fixed-header for mobile? None of what I'm finding seems worthwhile for iDevices.
This is a difficult problem. Support for fixed positioning is broken or missing in most mobile devices. First mobile browsers that support that came with devices produced this year, or so.
I remember that jQuery Mobile team struggled with fixed headers and footers for quite a while.
They got it working, so I recommend either using jQuery Mobile (or some other framework that can do that obviously) or digging into their JS and CSS to find out how that works.
Anyway, without about 20 different test devices you won't be able to be sure it works. So unless you have a respectable budget, you have to stick to the well-tested open-source solutions.