I've read quite some posts about webkit browsers having issues with images. I couldn't find a post and thus an answer for the one I'm about to explain.
I created a home-made slideshow using jQuery that basically places all the images next to each other on a row and I then play with a mask element (overflow: hidden) and the margin-left property to select which one is to be displayed. I didn't reinvent the wheel...
On FF, Opera and even IE, it works like a charm! But I have no luck on Chrome (I didn't test Safari) : the first image shows ok but when the sliding effect kicks in, 20px-ish of the first slide remains at the top of the slideshow and overlay the second slide. If I carry on sliding, the first slide part remains as an overlay on the following slides. The images don't refresh ok on Chrome which makes the whole slideshow look rubbish.
I tried to play with the images css properties after the sliding effect to kind of force the container to refresh its content but again, no luck.
Does anybody have an idea on how to work that out?
Thank you
Found the fix...
As I said, trying to force the container to refresh its content using some different css properties didn't work.
What worked though was to add a span to the container, that's it... At the time of the issue, my container only had images in it and a map. I added a span (out of luck) and it worked straight away!
I can only assume why adding a span makes the whole container behave ok. I guess it is kind of the same than the "hasLayout" property IE6 used to throw at geeks. It couldn't render the element properly until it had an element that had a consistency (height, width ... set with a value).
Anyway, I hope this will help and yes, I did dare to compare Chrome to IE6... ;-)
Good day
Related
So I have a website that has a hamburger menu on mobile.
The problem is that whenever the page loads on a small device, the hamburger menu is way outside the view port to the right. This causes side scrolling issues and tons of white space.
I originally assumed I had written some css that was causing this, but after experimenting, I've come to realize that I do not know what is going on at all.
I have Gifs of the problem. I will also provide a URL if needed.
Heres the first gif
https://gfycat.com/GiftedPlaintiveEgret
So heres what is happening. I am inspecting the DOM of the webpage. If you pick any random element on the page, and edit a CSS attribute, then the menu fixes itself. It doesn't matter what element you select or what css attribute you edit; when you make an adjustment the problem is fixed.
Here is the second gif
https://gfycat.com/EasyIllustriousBlackbear
In this gif, the issue is literally fixed just by activating a CSS plugin called pesticide. Pesticide simply adds another external css sheet to the document that outlines everything in blue. Notice that even when I turn off pesiticde, my issue has been fixed.
And finally the third gif
https://gfycat.com/ContentRepentantBeetle
This is the most perplexing issue. It fixes the hamburger icon simply by resizing my browser screen. Obviously mobile users cant do this.
I truly don't understand this issue. I've tried to set a width of 100% on the nav element. I've written some javascript that when the DOM is ready, to add a css attribute to a a DIV in the footer and then remove it after a few seconds. This does not fix my issue. I would happily provide the javascript I wrote if requested.
Has anyone else ever had an issue like this?
EDIT
Here is another example. I use the browser Blisk to test my sites on multiple devices. Look at this
https://gfycat.com/BouncyFlakyGlobefish
When I first load up the site, I have my hamburger menu issue. When I tell the browser to view the site from a different device 'say switching from iphone 5 to iphone 6' it fixes the issue. I am so frustrated with this problem.
The white section's animation is increasing the width of the page (pushing the hamburger which is fixed to the right out of view), I'm not certain why this doesn't update properly after the animation is complete, but it would appear it requires a page re-flow before working correctly.
A possible CSS fix would be to add .bodymargins{overflow:hidden} though this may cause problems to other styling (untested on your site)
If this isn't an option, you could manually trigger a re-flow of the page shortly after loading (this is a slightly nasty option, but is better than it being broken)
Various re-flow options available here
It may be because you are using media queries and your browser width is not yet small enough for them to fire when you test.
If not, make the media queries and don't use the margin-left:auto for the smaller screen size?
The Problem:
I have a web application on the iOS homescreen so there is no browser window and it looks and functions very well. I've figured out how to make inner div elements do the touch scrolling events and use the momentum/bounce style in iOS, and that works perfectly... the issue I run into now is that the bounce scrolling (again, iOS-only) is messing up any fixed elements or site-related animations I have on the page.
When I try the following:
document.ontouchmove = function(e) {e.preventDefault()};
The issue stops, but now I can't scroll anywhere on my application.
What I Need:
I want the body to be completely locked in place... If someone grabs, say, my sidebar or navbar and then pulls on the page, the body bounces! But if someone is inside the content area, there is no issue at all--the application scrolls flawlessly and looks great. If I stop scrolling on the sidebar or navbar or body, all scrolling in the application will not working and is essentially nonfunctional.
tl;dr: Body bounces on scroll. I want a scrolling content area and no scroll anywhere else. The body should NEVER move, but elements I deem scrollable within the body should.
As a sidenote, I've browser the following popular questions/solutions posted (among many others):
1
2
3
I just wanted to post that up before people assumed I didn't do any searching... I've been at this for hours now and have seen even more solutions than posted above, but I wanted to get the most popular ones listed above so no one thought this was a duplicate question.
I figured this out a few days ago and have this handy jsbin set up to demonstrate what I did to make this work:
My Working jsbin Example
When you open this link on an iPad, the text should be scrollable. Try tugging around the rest of the screen when there is no current touchmove event currently working.
If you play around with it, you'll notice that only the inner textfield moves as expected. This is determined by putting my .scrollable class within the .container class. The .scrollable class takes up the full height of it's parent container.
Now make the container a larger height, like height: 500px. The goal here is to make it large enough to have no overflow yet small enough to have other whitespace on the iPad still. Try scrolling it or pulling it... No touchmove events are fired and the screen stays in place.
My JS determines if an object has overflow after being touched. If it does, it scrolls. If it does not, it does not send a scroll event.
Play with it and let me know if I can provide any better examples and also if you run into any bugs... Right now the only one I know of is if you're really trying to break it and start tugging around the site while a current touchmove event is being fired, or the page is first loading... I wouldn't count those as "bugs", but if you can find a fix for those too, I'm all ears!
I'm using a jQuery plugin called jCarousel Lite to create a vertical scrolling Twitter ticker. Everything works fine, except for the fact that some tweets aren't shown completely. They're cut off before the last line of text. I can't seem to figure out what is causing the problem and it seems to occur more or less randomly too.
The page at http://www.reekx.nl/ shows the Twitter ticker in action (bottom right, titled 'Reekx op Twitter').
Is anybody able to tell me what's going wrong here and how I can fix it?
The Carousel sets a height for the elements, and at the same time you have overflow:hidden in your CSS.
This bascily means you are telling the DIV that it should be 104px heigh, and all overflowing content should be hidden.
Ill try to find if you can disable a fixed height in carousel mean while :)
Could you try playing with the "fit" option?
You can try playing with the options, which can be found here: http://jquery.malsup.com/cycle/options.html
But the 2 which is relevant should be:
$('#stwitterThing').cycle({
fit: 1,
height: auto
});
I just need to display the images in the very center of the page. The images will be different widths but should still be centered. I have custom arrow pointers and I want the other images to be hidden while the other fades out and a new one in.
I've found jquery cycle and stuff but I couldn't center the slideshow to the center of the page for some strange reason.
Any advice?
What plugins can I alter (just replace images) to get what I want?
http://www.proglogic.com/learn/javascript/lesson10.php
not sure if you are still looking for this, as its been awhile since your post - but this is a very simple slideshow using javascript and a table. the image is displayed with "previous" and "next" links below, which can of course be changed to whatever you want. the only possible issue is that it uses html tables which are frowned upon (unless completely necessary). it is however, very easily center-able using css. good luck!
Checkout Anything Slider. That seems to be what you are looking for.
I have a script that lets you put a link at the bottom of some text so you can reveal more text. It works great in Firefox. When you click the link, the div appears and the other parent divs expand with the growing child div. But the parent divs don't expand in IE. The text actually disappears behind the row (this is in a table created with divs) below. I want it to push the next row down so that the rest of the text appears.
Also, my images seem larger in IE than they are in Firefox. Can I scale the images a little bit with a conditional statement? If so, how?
Have you considered using something like the JQuery Accordion? It's a quick way to accomplish something like you're going for, if I understand correctly.
you have more than one problem, anyway images with fixed sizes should render the same across browsers. For the first problem with the link you should post some code. I suggest you to check if your script throws some errors in IE using the IE developer toolbar (bundled with IE8 or downlodable here from Microsoft)