I've a weird problem that only occurs in Safari 6 on some mac's even with the same version of Safari and OSX.
The problem is three png's being displayed as a button, they're all css background-images and they've been exported by Photoshop's save for web feature from the same file at the same time with the same settings. But still Safari finds it neccesary to display a weird solid color on top of my png. The problem sometimes (partially) disappears when zooming in in the browser. Chrome, Firefox, IE on PC and Chrome and Firefox on Mac display the image normally. Below is a screenshot of the png.
Has anybody seen this problem before? Is it just a bug in Safari or is there some sort of explaination? I can understand if there is a problem with gamma correction or color profiles, but that should not affect two similar image files, or at least affect them the same way so you cannot spot the difference.
I've created a Fiddle where you guys can see the code and the error aswell (if your mac is displaying it weird at least) Click here for the fiddle But this is pretty much the css
.backbutton {
float: left;
margin-top: 20px;
}
.left {
display: block;
float: left;
background: url(http://daanolislagers.nl/btn-arrow-left.png) no-repeat 0 0px;
width: 17px;
height: 30px;
}
.middle {
display: block;
float: left;
background: url(http://daanolislagers.nl/btn-middle.png) repeat-x;
height: 23px;
font-size: 14px;
padding-top: 9px;
padding-left: 3px;
padding-right: 4px;
font-weight: normal;
color: inherit;
min-width: 190px;
text-transform: uppercase;
}
.middle {
min-width: 47px;
}
.right {
display: block;
float: left;
background: url(http://www.daanolislagers.nl/btn-right.png) no-repeat;
width: 3px;
height: 30px;
}
Cheers!
Related
I'm seeing a bug that is intermittently reproducible only on iPhone Safari (not on any other mobile or desktop browser not even macbook safari). The code looks like:
<div style="overflow: auto; height: calc(100% - 55px); background-color: cyan;">
<ul ...><li..></li> <!-- some ul containing li omitted for brevity-->
<label class="certainClassname" style="font-size: small; font-style: italic; width: 100%; text-align: center; background-color: yellow">
{{"msg" | translate}}
</label>
</div>
In other style sheet I have:
.certainClassname {
cursor: pointer;
word-break: break-all;
}
msg = "PKtest!" for my testing though it usually has another value.
The problem is that this label is getting cropped at the edges when the bug is reproduced as below:
This bug is only seen on Safari iPhone and none of the other browsers, and seems to only happen the first time that page is loaded, and not later. It could be related to zooming because even the tiniest pinch-to-zoom on iPhone fixes it and the label text (and yellow) expands fully.
Could someone please help me diagnosing this in CSS above? I've tried to fix using each in css of label but none have worked:
display: inline;
display: inline-block;
display: block;
padding: 2px 10px 2px 10px;
margin-left: auto;
margin-right: auto;
z-index: 999;
clear: both;
(all these above tested but none fixes this issue seen intermittently and only on iPhone Safari).
The reason the label is getting cropped might be because of style="overflow: auto; height: calc(100% - 55px)" for div.
div is the parent of label. Therefore label is inheriting its style from its parent. You may consider removing height: calc(100% - 55px) to see if it works
It's difficult to get the idea without reviewing working code. But I tried to run your code, regenerate the bug and here is the possible solution. Let me know, is it something you are looking for?
.certainClassname {
cursor: pointer;
word-break: break-all;
font-size: small;
font-style: italic;
width: 100%;
text-align: center;
background-color: yellow;
display: inline-block;
}
ul {
padding: 0;
}
<div style="overflow: auto; height: calc(100% - 55px); background-color: cyan;">
<ul ...><li..></li> <!-- some ul containing li omitted for brevity-->
<label class="certainClassname">
{{"msg" | translate}}
</label>
</div>
I think you have to set you label around a div with width: 100% a background-color: yellow
I got this issue with the text overlaying itself on very small screensizes, such as mobile devices or very small windows in chrome.
Text Logo with the bug
My css for the navbar looks like this:
.navbar-default {
background-color: #B71C1C;
background-image: none;
justify-content: center;
height: auto;
line-height: 18px;
letter-spacing: 2px;
font-weight: bold;
padding-top: 20px;
padding-bottom: 20px;
border-color: #FFF;
position: relative;
}
.navbar-brand {
font-size: 3em;
margin-left: 25%;
display: block;
border-color: #FFF;
z-index: 1;
}
I'm not sure whats causing it since it never happens on my screen ("24 and iphone 6s +) since my screens are larger than some others. I got the issue as feedback from someone else who tried to check my site. It would be great if the second word just appeared below the first one in such cases.
Regards,
stAMy
Try this it may work fine.
#media(max-width: 767px){
.navbar-brand {
font-size: 2em;
margin-left: 0;
}
}
Explanation
You have used margin-left: 25%;, it occupies 25% of empty space, then the font size as 3em. There may not have any space so the text breaks and comes in second line.
Try to use the font size and margin in media query, which I have given.
As shown in the images, the background image of my webpage fits on chrome, but for some reason, the image does not scale correctly in firefox even though the window sizes are the same. Worse yet, when I shrink the window width, it does not scale well at all. How am I supposed to know the window size of the browser someone is using?
UPDATE here are the images. First is chrome, second is firefox
https://www.flickr.com/photos/125343138#N07/24491082235/in/dateposted-public/
https://www.flickr.com/photos/125343138#N07/24464890356/in/dateposted-public/
Here is the stylesheet
.nav {
list-style-type: none;
margin: 0;
padding: 0;
width: fill;
overflow: hidden;
background-color: #333;
}
.nav li {
display: inline;
padding: 20px 10px;
}
.nav li a {
color: whitesmoke;
padding: 14px 190px;
font-family: 'futura';
font-size: 16px;
position: relative;
top: 5px;
}
.jmb {
background-image: url('https://farm2.staticflickr.com /1600/24149223706_da584c8c45_o.jpg');
height: 100%;
width: 100%;
position:absolute;
background-repeat: no-repeat;
background-size:contain;
background-position: 00px 37px;
}
.jmb h5 {
font-family: 'Yellowtailregular';
font-size: 105px;
color: black;
margin-top: 170px;
margin-left: 190px;
-webkit-animation-delay: 1s;
-webkit-animation-duration: 4s;
}
.jmb div p
{
font-size: 27px;
font-family: 'futura';
margin-left: 110px;
margin-top: -24px;
word-wrap: break-word;
width: 27%;
-webkit-animation-delay: 2s;
-webkit-animation-duration: 4s;
}
Technically you'll only really know what browser size your user is using based on your metrics and what you know about your demographic. I'd start with something small and scale up higher as you go till you reach that large desktop size.
AMACB is right about the webkit support so some of your code might require a moz prefix to work correctly. you can find documentation on the support for that here:
https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_support_chart
As far as covering your entire given area, I don't see a live link but my first suggestion would be to try with this:
background-size: cover
That should take the image and map it to the size of the object its in although you may not get the aspect ratio right. Thats when you might consider using media queries and/either different images or different positioning to alter how its displayed. Be sure to check your markup as well to make sure that there isn't an object that is on the border of your page as well that would prevent the image from reaching the end.
Question
I'm trying to vertically center a letter with a big font-size cross browser. It's more difficult that what it seems apparently, since every single approach i've tried (line-height, display:table-cell, transform: translate...) fails with big font-size. The problem exist only in OS X.
I've been trying to resolve this behavior problem for quite some time now, here's a solution that works on Safari only:
div {
width: 200px;
height: 200px;
background: #2b2b2b;
text-align: center;
line-height: 200px;
color: #fff;
font-family: helvetica, arial, sans-serif;
font-size: 200px;
}
<div>O</div>
Here's a Codepen with the code.
Here's a result screenshot in OS X 10.10 with both Safari, Chrome and Firefox:
Update
After hours of extensive testing, i've managed to identify the origin of the problem, the font-family helvetica. On windows the font family does not exist, so the font loaded is only arial or a sans-serif. On OS X helvetica is present, but the font-family differs in the three browser. As i removed the font-family, the letter was vertically-aligned by the line-height correctly. But now, i'd love to understand why is this bug present in the first place.
Here's a codepen with the new code: link
div {
width: 200px;
height: 200px;
background: #2b2b2b;
text-align: center;
line-height: 200px;
color: #fff;
font-family: arial, sans-serif;
font-size: 200px;
}
<div>O</div>
Im not sure if this is right, but I removed the line height and added padding instead e.g. padding: 30px 0 0 0; seemed to do it for me. Not entirely sure if this is what you wanted.
try this fiddle code :
http://jsfiddle.net/x25wh1ym/1/
div {
background: none repeat scroll 0 0 #2b2b2b;
color: #fff;
font-family: helvetica,arial,sans-serif;
font-size: 200px;
height: 100vh;
position: relative;
text-align: center;
width: 200px;
}
span {
height: 100vh;
line-height: 100vh;
position: relative;
vertical-align: middle;
}<div><span>O</span></div>
I have a text field with a image button next to it. When I zoom out in Safari Browser the text field isn't equal on height to the image button beside it. I only have this problem on the Safari Browser and not in IE, Mozilla, Chrome, and Opera.
html
<form>
<input type="text" name="search_bar">
<input type="image" src="http://www.somerandomdude.com/wp-content/uploads/search-icon.png">
</form>
css
form input[type=text]{
float: left;
width: 200px;
height: 34px;
border: none;
outline: none;
}
form input[type=image]{
float: left;
width: 36px;
height: 36px;
}
Screenshots
first: Chrome no zoom
second: Chrome zoom-out
third: Safari no zoom
fourth: Safari zoom-out
Demo
So do anyone know a way to fixed this?
I Think the problem is due to the fact that Safari uses only int values to position it's elements and the other browsers uses floats values... So when you zoom the value is rounded for all browsers except Safari.
So I suggest you to use the same size to your inputs like set a height: 36px; to your form input[type=text] (note that you'll need to use a padding: 0px; in that case). So your CSS began:
body{
background: #4679bd;
}
form input[type=text]{
float: left;
width: 200px;
height: 36px;
border: none;
outline: none;
padding: 0px;
}
form input[type=image]{
float: left;
width: 36px;
height: 36px;
}
I hope it will work. Have a nice day =) !