I've encountered a challenging issue that I'm struggling to resolve independently.
Upon further investigation, the real problem lies in the varying rendering of the button tag in different browsers. Specifically, Firefox and Safari display the button differently compared to Chrome.
You can view the issue in action on this jsfiddle.
In Chrome, the image is distributed evenly without any white space left in the element (outlined in red). However, Safari adds some left-side spacing, while Firefox introduces both left-side and top spacing.
How can I target the button tag specifically for Safari and Firefox to address this problem?
CSS
.vlp_s_container {
position: relative;
/* height: 132px; */
border: 1px solid red;
/* background-color: yellow; */
width:206px;
}
/* Zoom In #1 */
.vlp_s_hover01 .vlp_s_fig .vlp_s_img {
/* padding: 0px; */
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.vlp_s_hover01 .vlp_s_fig:hover .vlp_s_img {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.vlp_s_button {
padding: 0px;
margin-top: 0px;
line-height: normal;
display: block;
border: none;
text-decoration: none;
}
.vlp_s_button:hover {
cursor: pointer;
}
.vlp_s_img {
width: 206px;
height: 116px;
padding:0px;
margin:0px;
}
.vlp_s_fig {
width: 206px;
height: 116px;
margin: 0;
padding: 0;
background: #fff;
overflow: hidden;
}
HTML
<div class="vlp_s_container" title="Watch This"
id="abc">
<div class="vlp_s_hover01 vlp_s_column">
<figure class="vlp_s_fig">
<div>
<button class="vlp_s_button">
<img class="vlp_s_img"
src="https://upload.wikimedia.org/wikipedia/commons/7/76/Jenson_Button_2014_Singapore_FP2.jpg">
</button>
</div>
</figure>
</div>
</div>