[beta] Decrease the Opacity of An Element - browser specific test failure
See original GitHub issueChallenge decrease-the-opacity-of-an-element has an issue.
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/602.4.8 (KHTML, like Gecko) Version/10.0.3 Safari/602.4.8
.
Please describe how to reproduce this issue, and include links to screenshots if possible.
<style>
h4 {
text-align: center;
background-color: rgba(45, 45, 45, 0.1);
padding: 10px;
font-size: 27px;
}
p {
text-align: justify;
}
.links {
text-align: left;
color: black;
opacity: 0.7;
}
#thumbnail:hover {
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.fullCard {
width: 245px;
border: 1px solid #ccc;
border-radius: 5px;
margin: 10px 5px;
padding: 4px;
}
.cardContent {
padding: 10px;
}
.cardText {
margin-bottom: 30px;
}
</style>
<div class="fullCard" id="thumbnail">
<div class="cardContent">
<div class="cardText">
<strong><h4>Alphabet</h4></strong>
<hr>
<em><p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p></em>
</div>
<div class="cardLinks">
<u>
<a href="https://en.wikipedia.org/wiki/Larry_Page" class="links">Larry Page</a><br><br>
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" class="links">Sergey Brin</a>
</u>
</div>
</div>
</div>
Issue Analytics
- State:
- Created 7 years ago
- Comments:12 (12 by maintainers)
Top Results From Across the Web
Applied Visual Design: Decrease the Opacity of an Element ...
I added a line ' opacity: 0.7; ' into links class declaration, but the test failed. At least, I could see the anchor...
Read more >Fixing Browser Compatibility Issues with CSS Opacity & RGBA
CSS Opacity and RGBA add color to HTML elements but, are not compatible with all browsers. Learn how to check browsers' compatibility with ......
Read more >opacity - CSS: Cascading Style Sheets - MDN Web Docs
The opacity CSS property sets the opacity of an element. Opacity is the degree to which content behind an element is hidden, and...
Read more >Chrome 105 Beta: Custom Highlighting, Fetch Upload ...
The custom highlight API provides a programmatic way of adding and removing highlights that does not affect the underlying DOM structure, but ...
Read more >Everything you need to know about Twitch Studio Beta
Sponsored by OWN3D: https://eposvox.gg/own3d For all your stream branding needs! Welcome to StreamGuides - today we're covering the Twitch ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@Marvive Thanks for reporting this! I am able to confirm this on Safari, however the solution works correctly in Chrome.
/ cc @freeCodeCamp/moderators - it looks like this is because Safari returns a finer precision number than Chrome does when
$('.links').css('opacity')
is called. Even though the user sets an opacity of0.7
Safari ridiculously returns"0.699999988079071"
. So to fix this, we could use Chai’sapproximately
assert:where
0.7
is the expected value, and0.1
is the +/- delta.This seems easy enough - should we open it up to Help Wanted / First Timers Only?
@systimotic It could be, but it seems more like Safari has some funky math for getting/setting some css values.