I have the following problem which occured in Safari 11. Safari browser does not "repaint" or "recalculate" the position of the text correctly when the styles are placed before closing body tag.
These styles causing the issue:
h1 {
letter-spacing: .2em;
text-align: center;
}
You could see the example here. The text will repositon when you click on it in Safari. Is there any workaround to position text correctly?
http://jsfiddle.net/rauot9tq/3/
or:
http://jsfiddle.net/rauot9tq/4/
In the picture below, there is misplaced text in the first line and doubled when clicked on it in the second line:
The answer to this issue is to force Safari to re-render the content.
Pure css solution is e.g. to set styles in <head> element to:
body {
display: none;
}
and in the footer:
body {
display: block;
}
Here is updated working fiddle: http://jsfiddle.net/rauot9tq/10/
Another soulution could be to force Safari to redraw using JS:
document.querySelector('body').style.display = 'none';
document.querySelector('body').offsetWidth;
document.querySelector('body').style.display = 'block';
fiddle with JS solution: http://jsfiddle.net/rauot9tq/11/
I've just came across the same issue and it looks like this yours is the only jsfiddle available with simple and proper reproduction, thank you. Though I think the cause of the issue isn't <style> before </body>, otherwise simple <span> inserted in between those two could fix the problem. I was able to solve the problem changing text container display property to inline-block, and adding width to it, so my text could still be in the center.
h1 {
letter-spacing: .2em;
text-align: center;
display: inline-block;
width: 100%;
}
Here is the fiddle: http://jsfiddle.net/rauot9tq/28/ .
Related
Here is my JSFiddle for full code example.
Notice how you can hover over that orange road glyphicon and it correctly displays my popover? Well, when I shrink the width of the Result section down to the point that the menus stack vertically, and then I hover over the popover, it doesn't render. To me, this means it won't render when a user is viewing my app from a mobile browser.
I tried:
#fieldMode .popover {
min-width: 300px
}
#fieldMode .popover-title {
color: rgb(255,102,0);
background: rgb(176,205,249);
}
#fieldMode .popover-content {
color: rgb(12,66,144)
}
...but that doesn't seem to work. What's the fix?
On mobile, your a tag is given display: block by the bootstrap styles, causing to to be 100% width. This won't work if you're trying to position the popover to the right of it. Adding display: inline-block will cause it to only take up the space it needs instead of the full screen width. Updated fiddle: https://jsfiddle.net/mgup49hv/1/
#fieldModePopover {
display: inline-block;
}
I have a little problem with Superfish navigation height in bootstrap theme.
-->testi4.aada.fi
I'm not able to reduce its height at all and there is this
element {
line-height: 113px;
}
if you check it with Firefox inspector and i do not know where it is coming from
Pls, help.
// Mika
What happens if you try using %'s instead?
i.e.
element {
line-height: 90%;
}
If that doesnt work, try some additional padding/margin within that element.
element {
line-height: 113px;
padding: 10px;
}
Another suggestion.. You can play with the values using Firebug under Firefox to get the correct value/setting..
I had big trouble with printing from Firefox (any version, mine is 16.0.2, but even Aurora dev builds did the same).
When printing the page, Shrink to fit in the Print preview doesn't work. Only way, how to fit the page onto the paper is selecting Zoom 70% in the same dialog.
Other problem:
it prints only first page.
What to do?
I needed to adapt the CSS file for printing, so I've done one. It works flawlessly anywhere, but not in Firefox. What was the problem?
First I've tried specifying Width and height for BODY and HTML in the print.css file. Than margins, etc.
Later I figured out what was the problem:
standard CSS file had the following in it:
body {
...
overflow-x: hidden;
overflow-y: scroll;
}
So I've added the following into the print.css file:
body {
overflow-x: visible;
overflow-y: visible;
}
I guess, if you had only overflow specified in the CSS, not -x & -y, you would need to specify only overflow:visible in the print.css file.
Printing from Firefox works now as it should. I just thought, that this may help somebody, who has strange printing behavior happening in Firefox.
In addition to the Kokesh's answer, some times attribute
display: table
generates this problem too. So you need change it to 'block' or another that fits to your requeriments.
I tried the fixes suggested in other answers but they didn't solve the problem for me. After a lot of research and trial & error, I have found this article by A list apart. I was skeptical because it's so old but it states that:
If a floated element runs past the bottom of a printed page, the rest of the float will effectively disappear, as it won’t be printed on the next page.
As I have a big floated container I thought I'd give it a try. So, I made a mix from the other answers and this article and came up with this:
body {
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
}
/*this is because I use angular and have this particular layout*/
body > .fade-ng-cloak {
height: 100%;
display: block;
flex: none;
float: none;
}
.l-content,
.l-sidebar {
float: none;
}
So basically:
Setting body to overflow: visible
Setting elements that behave as wrappers to display: block, eliminate all flex styles and reset height if necessary
Eliminate float on long containers
That mix worked for me! I'm so happy I thought I'd share :)
Please note that I have been through the existing links on this topic and none seem to help in my case.
All suggest a way of how to move the text vertically so that it appears aligned. The problem in my case is that it is already aligned in Chrome, so when I try to align the text for Firefox then it misaligns the text in Chrome.
Please open the following link in Firefox (v12) and Chrome (v19).
http://jsfiddle.net/UQ4D5/
You will notice that it is shifted towards the top in Firefox but is perfectly aligned in Chrome.
Two properties in your css
display: table-cell;
vertical-align: middle;
Check to live demo http://jsfiddle.net/UQ4D5/5/
Learn to use reset.css or normalize.css for prevent small differences in browser rendering models.
And then use height=line-height trick:
div {
font-size: 100px;
text-align: center;
height: 120px;
line-height: 120px;
border: 1px solid black;
}
chrome metrics:
firefox metrics:
Height is the same in both cases.
The issue is based on the Browser default Stylesheets. I recommend you to use a proper reset Stylesheet or even normalize.css
Amazing...something I have gotten to work in IE and NOT Firefox! Quite the turn of events, eh?
Anyway, here's the problem. Check out the following page in both IE and Firefox:
http://www.lolstrategies.com/test/button_sample.html
I'm using this file to put together the button.
(http://www.lolstrategies.com/test/composite__V153767378_.png)
Obviously this button is centered in only IE.. what gives?!
I'm using a span for the background that is under the text and another for the tip and then floating them together with float: left as you can see by viewing the source.
So, what can I do to get this span centered in Firefox?
Thanks in advance.. please let me know if there you have any questions about this that I can help answer!
Your span.buttonLarge contains two uncleared floated block-level elements, hence no centering. In order to fix this, you could apply display: inline-block and margin: 0 auto to it.
P.S. You don't have a DOCTYPE specified, that's why your current solution works in IE - it is rendering it in Quirks mode.
Remove float: left; from .primaryLargeButtonSpan and .primaryLargeButtonEnd
after that change display: block; to display: inline; from .spriteButton span.button_label
OR change it to display: inline-block; and then, set the background property to url("./composite__V153767378_.png") no-repeat scroll left -76px transparent;
You might notice some "defect" in the ending image though...