Bootstrap affix content within pushed column breaks layout in safari at the time of scrolling - twitter-bootstrap-3

Yes, this is some kind of duplicate question posted 1 year ago by someone. I like to know have there any good solutions came for this so far ? Issue for this at github is also closed :( I need a solution for this badly. Please, open my fiddle from Safari to see the problem as it's only happened at Safari.
At safari:
(a) Normal
(b) At the time of scrolling:
Thanks

Add to CSS:
.box.affix {
position:absolute;
}

Related

Page indicator in Carousel for Xamarin.Forms, it is possible?

I would like to show some page indicator in the Xamarin.Forms carousel, with dots or something similar.
The purpose is to let to the user know that there are more pages if he does swipe. The UX would improve a lot.
Any possibility/way to do this?
I wanted to implement the exact same thing and came across the following link:
http://chrisriesgo.com/xamarin-forms-carousel-view-recipe/
I found it quite easy to implement and figure out what is going on after reading through the post. A great option and well worked example in my opinion!
You'll only need to follow the example related to "Dots" of course :)
Hope this helps!

Magnific Popup appears below page on mobile

I'm asking this question here because the Magnific Popup docs said this was the best place for questions.
I'm having an odd issue, on smaller windows and mobile the popup appears below the page and you have to scroll down to it. I haven't had this issue before and I was hoping someone else had.
You can check the demo site at http://seemywebsite.org/customreserves/
You have to use media queries and override the required classes, for the mobile versions.
Figured it out for anyone else who may have this problem. I'd applied padding to the popup, and that was breaking the layout, so adding box-sizing:border-box worked. Phew.

All the transitions fail in safari

It's the first time that I meet such a problem with transitions.
None of them is working on Safari, although they work perfectly fine in firefox and chrome.
http://www.custom-design.ch/_stack/predentec/
I used compass transition mixins, as I always do, so there really shouldn't any problem.
Do you have any idea or track to follow?
Thank you in advance for your help!
Hum, I found the source of the problem, where it absolutely wasn't expected.
This was due to the new version of livereload (2.3.27), that makes apparently different results while exporting CSS code.
I then downgraded to v.2.3.20, and everything was ok, as it has always been!
I wrote to the support of both Livereload and compass to see where the problem comes, but without any answer for now.

Bootstrap Inputs on safari 6 not right?

I'm having a problem with Twitter Bootstrap Inputs showing correctly on safari 6.0.
Im pretty sure this was fine before I moved to Mountain Lion, and it does seem to be an issue with Chrome.
Basically in Safari, the right end of the input seems cut off an is not displaying correctly. Ive taken a screen shot to demo what I mean...
Safari:
Chrome:
Any ideas?
EDIT: Just looking at the Twitter Bootstrap site and I see that alot of their inputs have the same problem!
Anyone else seeing this?
The artifact appears to be an issue with Safari's rendering of border-radius, and is not specific to Twitter Bootstrap. See rendering borders on Apple's support forum. The inputs usually render normally after you select them.
Disabling border-radius on the affected elements with the following two lines removes the artifact. Be careful though, sometimes this causes even more puzzling artifacts on nearby buttons.
-webkit-border-radius: 0;
border-radius: 0;

EasySlider 1.7 - IE9 breaks it by blocking scripts

I've been playing around with EasySlider and everything was working perfectly - until I viewed my site in IE9.
Instead of displaying the slider with 3 images sliding across, it displayed all 3 images sat one underneath the other, and a message at the bottom of the screen saying that scripts etc had been blocked and did I want to allow blocked content.
As I was using this in the hear of my website it pushed my whole site down the page and just looked stupid with the 3 banners on top of each other.
I realise I can get rid of this by unblocking the content, but that's not the point. I think this is the default security settings for IE so everyone that visits my site will see it like this for the first time (or everytime if they don't unblock the content).
So is there a way around this? Or at least a way that if the script is blocked only the first image is shown instead of all of them? This seems a pretty big flaw!
I had the same issue as you and found a very simple solution for it using CSS. All you need to do is copy and paste the line of CSS code below onto the screen.css stylesheet that came with the EasySlider 1.7 Plugin. I hope this helps.
#slider {
position:relative;
}
I found this solution at the "ClickNathan Handmade Websites".