When I inspect the element in Chrome, the code is being generated with the correct URL – but the image does not display until I either refresh the page or change an attribute of the styling from Chrome's inspector panel. This bug does not occur in Safari.
I've found that if I remove turbolinks, it works in both browsers. As a side note, I am also using jquery.turbolinks gem.
<div id='show-hero' style='background: url("<%= #roaster.roaster_image_url %>") no-repeat center top;'></div>
Any idea would be greatly appreciated.
I've experienced this same behavior when using inline styles to assign background-image in Rails 4 with Turbolinks enabled.
It's hacky, but my current workaround is to assign the background image with a bit of js/jquery at the bottom of the view, and bind it to a page load event (more info on turbolinks and page load events here: https://stackoverflow.com/a/18770589/1769539 )
Here's an example of what your JS might look like:
<script>
function ready() {
$("#show-hero").css({
"background-image":"url(<%= #roaster.roaster_image_url %>)",
"background-repeat":"no-repeat",
"background-position":"center top"
});
};
$(document).ready(ready);
$(document).on('page:load', ready);
</script>
Related
When I set autofocus="autofocus" on an input element, then in Firefox, when the page loads, it displays for a split second without the CSS applied. (E.g. content not centered, heading rendered in default font etc.)
If I remove the autofocus, the page loads fine and displays when it is ready.
Is there a way to get the page to load normally while using the autofocus feature in Firefox?
I have found that by adding some JavaScript in the <head>, the page waits for the style to load before the focus.
I'm not exactly sure why this works, but it does!
Example:
<script type="text/javascript">
// Fix for Firefox autofocus CSS bug
// See: http://stackoverflow.com/questions/18943276/html-5-autofocus-messes-up-css-loading/18945951#18945951
</script>
I've got a very strange bug in chrome recently that is when you load the page first time, or in incognito mode that none of the background images show.
when you then F5 the page, the background images all load in.
When you inspect the css it shows the image url in the css panel, however when you mouse over the url it doesn't display a tool tip with a preview of the image.
Neither when you check the downloaded resources are there even any mention of the background-images downloading.
you then refresh the page and it works fine, tool-tip of the css url even shows a preview.
The bug only randomly happens on first load occasionally, no way to guarantee to reproduce this.
Also its worth to note, it you untick then retick the background-image property on chrome it then downloads and displays the image.
I've got a piece of jquery that solves the issue but as you can see its hardly very elegant!
$('*').each(function(){
var bg = $(this).css('background-image');
$(this).css('background-image', 'none');
$(this).css('background-image', bg);
});
this happens on every instance of windows in multiple versions of chrome.
any ideas would be great! thankyou!
you might be able to see it happen on http://ensa.ac.uk
here is a video demonstration # http://youtu.be/oLTyhk5rXgE
Just to note.
The problem had been solved.
The issue was that the browser downloads all the css background images last. So if you refresh the page before its finished downloading the images, when the page loads again it loads from the cache. but because the images did not fully download they dont show correctly.
First of all, fix these:
backg1round-color: #c7dfe3;
backg1round-color: rgba(255,255,255,0.67);
If images is a subfolder then use
url('images/logo-bg2.jpg');
instead of
url('/images/logo-bg2.jpg');
in main.css
Try this instead. Not tested though;
$('*').each(function(){
var bg = $(this).css('background');
$(this).css('background', 'none');
$(this).css('background', bg);
});
And make relevant changes (ie, background-image to background) in your CSS also.
OR try;
$('*').each(function(){
var bg = $(this).css('background-image');
$(this).css('background-image', 'none');
$(this).css('background-image','url(bg)'); // or try url("bg") i am confused :P
});
From some search and research I came to a conclution;
The way I would tackle this is with classes. Have a separate CSS classes for each of the states, then simply use jQuery to change the class. This would ensure that all of the images are actually downloaded and available when you set the class -- which is where I think Chrome is failing (probably all WebKit browsers would do this)
Change css class as:
#nav
{
background-image: url(../images/logo-bg2.jpg);
height: 180px;
}
Owen,
I still see this problem on the application that I'm working on. I know this is also a hacky solution, but it's a little less hacky than the jquery solution that you had posted. I simply threw a version number based on time after the css include and it
e.g.
" rel="stylesheet" type="text/css" />
I know that this causes the css to never be cached, but I have not found any other solution.
I'm using a Bootstrap modal dialog on my site (which works fine on desktop). When I try to use this function on iPhones and iPads, the modals do not work.
Is there a reason for this? Has anyone come up with a fix for this whilst using Bootstrap's CSS via #import?
I use the Bootstrap override file to make changes to the Bootstrap CSS.
I had the same problem these days and figured out, that safari on iOS is working differently to other browsers with respect to one thing. The modal window is not shown on safari but on many other browsers, when there is a href="#" missing.
not working on Safari/iOS but other browsers:
<li><a data-toggle="modal" data-target="#testModal">Modal</a></li>
working on Safari/iOS and other browsers:
<li>Modal</li>
The iPhone's browser doesn't seem to support the modal's "fade" transition. Disable it entirely from your modal dialog box, or if you want to get fancy, disable only when your site detects an iPhone device:
This doesn't work on the iPhone
<div class="modal hide fade" id="deleteConfirmation">
This does
<div class="modal hide" id="deleteConfirmation">
please check out http://jschr.github.com/bootstrap-modal/ as it fixes a bunch of the modal issues.. all you'll have to do is just include the 2 js files --
- bootstrap-modalmanager.js
- js/bootstrap-modal.js
and it just works
I know I'm a little late to this party but I was having the same problem and came across a solution that solved it. In case anyone else is having the same problem and finds this question doing a search here is the answer:
Add the class "clickable" to whatever you're tapping on with your iOS device that's supposed to open the modal. I assume you're using a div because an a tag or button should work just fine. Then in your CSS put this:
.clickable {
cursor:pointer;
}
This is not a Bootstrap problem, it's an iOS problem. The pointer lets iOS know that whatever you're tapping on is clickable, which normally doesn't include a div.
I won't take credit for this answer, I found it here:
Bootstrap Modal does not work on iOS devices
this is still an open issue on the Bootstrap Project:
https://github.com/twitter/bootstrap/issues/2130
This may be caused by incorrect dialog positioning. try playing with the "top" setting in the .modal class.
I had similar error on my mobile device (Android OS).
Modal works fine on desktop but on mobile doesn't work.
Problem was in my wrong definition of grid layout.
So, define .col-xs in any column of your layout, that worked for me.
I also had the same problem where my button to trigger Modal was not working on iPhone. I had to convert the <a> tag with Rails link_to and providing all possible attributes. ie.,
= link_to "Open Modal", '#', :remote => true, "data-backdrop" => "modal-backdrop", "data-toggle" => "modal", "data-target" => "#myModal"
Very easy, just add the an inline style, "cursor" to pointer and it will work straight away. style="cursor:pointer;"
<li><a data-toggle="modal" data-target="#testModal" style="cursor:pointer;">Modal</a></li>
If you're trying to display a modal during form submission, then you'll need to make sure the modal is activated before the submit event. This is because iOS Safari doesn't allow animations during form submission.
I was displaying my modal after jquery validation completed, which was too late. So instead I show the modal on button click, and dismiss it if jquery validation fails during the submit event.
I'm working on a cross-browser bookmarklet where I need to inject my own style sheet into the page as well as various divs, etc. I've got it working everywhere but IE so am now attempting to debug some of the styling issues there.
I'm adding my css to the document after a user clicks my bookmarklet as follows:
if (document.createStyleSheet){
document.createStyleSheet("http://mydomain.com/css/mystyle.css");
} else {
$('head').append('<link rel="stylesheet" href="http://mydomain.com/css/mystyle.css" type="text/css" />');
}
The file is being fetched and applied to divs, etc. I create on the page, however when I inspect the element in IE 9 Developer Tools it does not show me ANY properties from the stylesheet I added dynamically, only those in the style="{}" attr.
Also, mystyle.css does not show up in the dropdown on the CSS tab, yet it does have a corresponding element in the head and styles in it are being applied to the dom correctly.
Any thoughts on how to force the dev tools to recognize my new sheet? It is infuriating to attempt to debug css w/o being able to manipulate it in-browser directly.
Did you click the refresh button in developer tools? It doesn't refresh the page, it reloads the dom from the current page.
It works in Firefox, but not in Chrome: changing the css property 'background-image' via jQuery.
I'm trying to stylize themes for my website and I have made a few color options, but the background-image property doesn't seem to be changeable via the handler .css in Chrome
$('#h_background').css('background-image',"url('backgrounds/h_"+currentTheme+".png'");
however, it works fine in FF; any suggestions =)?
edit: loading new stylesheets that have the background-image property defined as something else works fine. I do find it strange that explicitly declaring it does not seem to work =(
You're missing a ) at the end of the url after .png'. It should be
"url('backgrounds/h_"+currentTheme+".png')"
Try wrapping your code in load event:
$(window).load(function(){
// your code for the image
});