takes deep breath
Ok, I have a large div that acts as a background layer. This div pans from left to right based on the link you select in a typical horizontal navigation. It's a bit of a novelty thing.
The HTML structure:
<div id="scroll">
<div class="container_16">
<div id="header" class="grid_9 suffix_3 alpha omega">
<!-- the links that control animation -->
<ul>
<li>Example 1</li>
<li>Example 2</li>
</ul>
</div> <!-- end #header --> <div class="main grid_8 alpha omega">
<div class="content grid_12 alpha">
<div id="the_content">
<!-- content is loaded in here via ajax -->
</div><!-- end the_content -->
</div><!-- end .content -->
<div class="clear"></div>
<div id="footer">
Footer stuff
</div>
</div> <!-- end .main .grid_8 .alpha .omega -->
</div> <!-- end .container_16 -->
</div> <!-- end scroll -->
A brief snippet of CSS:
#background_container {
position: absolute;
left: 0px;
top: 0px;
z-index: -1000;
width: 100%;
height: 100%;
}
#scroll {
width: 100%;
height: 100%;
overflow: auto;
}
The Javascript simply uses jQuery to animate the "left" attribute. I would include it, but there's a lot going on and I don't think it will help bring a solution.
Basically, when the background div scrolls from the first position to the last position, the content seems to "scrunch" briefly in Safari.
Video of this behavior:
[redacted]
In the video, I demo both safari and firefox. As you can see, in Safari the content scrunches/glitches during the animation. In Firefox, it does not. Safari is seemingly the only browser that does this. It even works in IE6. :)
The div that appears to "scrunch" seems to be <div id="header" class="grid_9 suffix_3 alpha omega"> but, sometimes you can see a scroll bar briefly which suggests <div id="scroll"> may be the root cause.
Is this a Safari rendering issue that's common and can be avoided? Or should I just suck it up?
Thanks in advance!
You have to set -webkit-transform: transform on the original element so that it gets hardware accelerated on load.
Related
I'm honestly stumped with this bug. My website is working perfectly fine on my laptop browser (at least it seems so). But when I switch to my phone it breaks.
(function animateBG() {
$('#logo-fallback').animate({
backgroundPosition: '-=1'
}, 12, animateBG);
})();
#logo-fallback {
background: url(https://i.stack.imgur.com/6B3gO.png);
background-size: auto 130px;
background-repeat: repeat-x;
height: 200px
}
<body data-gr-c-s-loaded="true">
<div id="header">
<div class="container">
<div class="clearfix" id="logo-fallback"></div>
</div>
</div>
<div id="body">
<div class="container">
<div class="row">
<div class="col-md-9 col-centered">
<h4 class="text-muted">Sorry, nothing here.</h4>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
</body>
container div, which contains a div with an id of #logo-fallback. #logo-fallback has a background image that repeats on the x-axis, and the x-position of the image decreases by 1 continuously using a jQuery animation to create a 'scrolling' effect.
This seems to work flawlessly on my computer's browser but when I switch to my mobile the image disappears once it has reached the start of the first repeat and reappears a few moments later.
Also, the image seems to move slower on my mobile...
I hope I made some sense out of my situation.
Kindest Regards,
I tried putting a dropdown but hes not on top of other elements. I tried puting z-index but still no luck. I've make the position: 'relative' but the element got pushed down when hovering on the dropdown button.
heres the site http://jaysonvelagio.webprodigymedia.com/
<div id="believe-belong">
<div class="site-width">
<div class="two-col">
<div class="two-col-one image">
<img src="assets/image/dine.jpg" alt="CLICKTREP Dining Privileges" />
</div><!-- .two-col-one.image -->
<div class="two-col-two">
<h3 class="green">Dine</h3>
<p>Taste your favorite mouthwatering dish for less on restaurants/Café/Bakeshop of your choice all over the Metro. Take advantage of the regular discounts and perks whenever you visit our partners.</p>
<div class="dropdown">
<button class="dropbtn">partners in dine</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div><!-- .two-col-two -->
</div><!-- .row.two-col -->
</div><!-- .site-width -->
</div><!-- #believe-belong -->
<div id="gray-back">
<div class="site-width">
<div class="two-col" >
<div class="two-col-two">
<h3 class="green">Shop</h3>
<p>Instant Discounts anytime from today’s best Shopping stores. <br>Like Toby’s Sport, RUNNR, Ideal Vision and a lot more. </p>
Partner Stores
</div><!-- .two-col-two -->
<div class="two-col-one image">
<img src="assets/image/shop.jpg" alt="CLICKTREP Dining Privileges" />
</div><!-- .two-col-one.image -->
</div><!-- .row.two-col -->
</div><!-- .site-width -->
</div><!-- #believe-belong -->
I had a play with your code in the website and seems your issue is a bit more complex to solve than you think.
The reason you won't get that dropdown is that you have overflow:hidden on the parent div with class two-col.
Now if you try and add overflow:visible to that it messes with the whole DOM structure as you can see:
The only way you can fix this is to add overflow:visible to your div and see how you can rearrange the structure.
UPDATE:
I had another play with it with only adding overflow-y:visible. This time it doesn't mess with the UI but adds a scrollbar to that div. If that's OK you can proceed with this one.
.two-col {
overflow-x: hidden;
overflow-y: visible;
position: relative;
}
I'm using Foundation 4.3.0 for a project, and am trying to set up Orbit in the most basic way. The javascript and CSS seem to be loading correctly, the images are loading, all the extra elements are inserted, etc. But the main <ul> always has a height of 0px. Here's my HTML:
<div class="row">
<section class="large-12 columns">
<div class="slideshow-wrapper">
<div class="preloader"></div>
<ul data-orbit="">
<li><img src="/media/cache/8a/ec/8aec9d6a99dea3db235f24712e8f3f88.jpg"></li>
<li><img src="/media/cache/20/88/208812a64eee2e7e9b8efe4b5f73c990.jpg"></li>
</ul>
</div>
</section>
</div>
Here's the HTML once foundation.orbit.js does its thing:
<div class="row">
<section class="large-12 columns">
<div class="slideshow-wrapper">
<div class="preloader"></div>
<div class="orbit-container orbit-stack-on-small">
<ul data-orbit="" class="orbit-slides-container" style="margin-left: -100%; width: 400%; height: 0px;">
<li data-orbit-slide="" style="width: 25%;"><img src="/media/cache/20/88/208812a64eee2e7e9b8efe4b5f73c990.jpg"></li>
<li class="active" style="width: 25%;"><img src="/media/cache/8a/ec/8aec9d6a99dea3db235f24712e8f3f88.jpg"></li>
<li style="width: 25%;"><img src="/media/cache/20/88/208812a64eee2e7e9b8efe4b5f73c990.jpg"></li>
<li data-orbit-slide="" style="width: 25%;"><img src="/media/cache/8a/ec/8aec9d6a99dea3db235f24712e8f3f88.jpg"></li>
</ul>
Prev <span></span>
Next <span></span>
<div class="orbit-slide-number">
<span>1</span> of <span>2</span>
</div>
<div class="orbit-timer">
<span></span>
<div class="orbit-progress" style="overflow: hidden; width: 54.15%;"></div>
</div>
</div>
<ol class="orbit-bullets">
<li data-orbit-slide-number="1" class="active"></li>
<li data-orbit-slide-number="2" class=""></li>
</ol>
</div>
</section>
</div>
I have tried to put explicit width + height on the images, put class="active" on one slide when generating the HTML, change various Foundation settings, etc, and nothing seems to work.
When I compare the HTML to the live example in the Foundation docs, I notice that in the working version, a z-index is always set dynamically on the slides. On my site, no z-index is ever set. And of course, the ul in the working version has an inline CSS height which equals the height of the slides.
If I manually set the ul height to 300px, everything looks right, except I see no images. If I set div.orbit-container to overflow: visible, I will see the edge of one of the slides to the left of the container.
Any ideas would be much appreciated.
I'm going to try to avoid being overly verbose here.. but this is what I've found and while I wouldn't call this a complete fix, because i'm not sure what started the differences in css the following code solved the problem.
I found this because I have a local environment as well as a dev environment for the site. The local environment was working great, but the production environment had all the issues you mentioned above.
The first issue of course is the generated container div setting the height to 0px. This is strange enough. I manually added the height to the container in the css. The reason all the images are hiding is they're set to margin-left: 100% or some large left margin and they're all positioned absolutely. I wish I could be more help as to why the code differences are present, maybe I'll find more time to investigate further but for now its working.
Anyway, the following was the fix:
.orbit-container { height:250px; }
.orbit-container .orbit-slides-container > * {
position: relative;
margin-left: 0;
float: left;
height: 100%;
}
.orbit-container { height:auto; }
.orbit-container .orbit-slides-container > * {
position: relative;
margin-left: 0;
float: left;
height: 100%;
}
A little upgrade from a previous solution. With this modification, it will be more easy to show the slideshow on a phone and a desktop.
Are you sure the url to the images are ok?
I had the same problem but with 2 of my 3 images and the problem was in the url
I was having the same problem and I've just found that using individual modules (I'm using compass) instead of using foundation.min.css solves the problem, have you tried to use foundation.css (not minyfied)?
I am building a phonegap app that needs to scale to all resolutions, and am thus defining everything in terms of percentages. I'm also using a fixed header with a div I defined in Jquery as the contents.
The problem I have is that during the transition between pages, there is a 'stutter' because the page height changes during the transition. I'm trying to stop this from happening. Any thoughts?
I've created a sample below to really illustrate the point.
http://jsfiddle.net/fz7qs/2/
<div id="pageContainer" style="position: relative !important; height: 100%;">
<div data-role="page" id="test1">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<a id="page2link">To Page 2</a>
<div data-role="content">
<p>Page content goes here.</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<div data-role="page" id="test2" style="height: 568px">
<div data-role="header">
<h1>Page 2</h1>
</div>
<a id="page1link">To Page 1</a>
<div data-role="content" style="height: 50%;">
<p style="height: 80%; border: 1px solid black;">This is page 2</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div>
The entire jsFiddle page jumps on the very first visit in Chrome desktop browser, so press the jsFiddle RUN Button to load correctly before use.
EDIT: Answer and jsFiddle revised per comment section developments.
EDIT 2: jsFiddles now use jQuery 1.7.2 with jQuery Mobile 1.2.0 to fix Chrome Browser Bug.
jsFiddle DEMO
The solution is to set your styles in a CSS file and not the HTML section since the jQuery Mobile UI has it's own style themes via a style sheet too.
Also, you have an extra closing div for page at the bottom in that HTML as well as not closing the webpage. The head section in your HTML is not necessary for jsFiddles, as the page is setup for HTML5 and you just need to import files (mobile jQuery) into jsFiddle using the Manage Resources button.
Although you listed in your Question as complete percentage units, I've keep the pixels units as shown in your example, but those can be percentages as well.
CSS Settings:
a {
cursor: hand;
cursor: pointer;
}
.content1 {
height: 268px;
}
.text1 {
height: 50%;
border: 1px solid black;
}
.content2 {
height: 568px;
}
.text2 {
height: 80%;
border: 1px solid black;
}
In your HTML section, I've also pinned the footer to the bottom of the page using data-position:
<div data-role="footer" data-position="fixed">
Besides pinning the footer to the bottom of the page, you can also have it not animate by adding an extra setting of data-id for each page that has the same value.
<div data-role="footer" data-id="foo" data-position="fixed">
jsFiddle FOOTER.
EDIT 2: Per recent discovery of jQuery 1.8.2 and jQuery Mobile 1.2.0 bug seen in Chrome (hidden scrollbar still causes body elements to jump), here is a revised jsFiddle example:
jsFiddle Percentage Based with jQuery 1.7.2 and jQuery Mobile 1.2.0
About this bug:
I just discovered that using jsFiddle with jQuery 1.8.2 and jQuery Mobile 1.2.0 does not work as intended when overflow is set to hidden during use of a scrollBars function within that jsFiddle.
That function is to hide the browsers scrollbars during jQuery animations, preventing elements to briefly jump around during the animation period of page changes.
The browsers scrollbars are in fact hidden, but elements in the body section continue to "jump" as if the scrollbars are still present.
This does not happen when jsFiddle jQuery is set to 1.7.2.
If your curious how to have multiple psuedo pages on a single page, check out this jsFiddle for an unrelated SO Answer here.
Try to change this:
<div data-role="content" style="height: 50%;">
to that:
<div data-role="content" style="height: auto;">
example: http://jsfiddle.net/fz7qs/13/
I am using a jQuery slider panel that pushes the content down rather than overlap it (intended), which works fine on Chrome but not Firefox. On Firefox, it pushes the content down, but when I close it, the pushed down contents stay put, thus leaving a gap where the panel used to be.
How exactly do I go about fixing this? Here's the code I used for the panel:
<div id="about">
<div id="panel">
<!-- the content -->
</div> <!-- end #panel -->
<p id="top" class="slide">+ about</p>
</div> <!-- end #about -->
This is the Javascript:
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
Thank you for your help. :)
Modify the panel style to include float:left and width:100%
#panel{
background-color: black;
display: none;
float: left;
height: 250px;
padding: 50px 0 20px;
width: 100%;
}
This should fix your problem.