question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[beta] Decrease the Opacity of An Element - browser specific test failure

See original GitHub issue

Challenge 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:closed
  • Created 7 years ago
  • Comments:12 (12 by maintainers)

github_iconTop GitHub Comments

2reactions
no-stack-dub-sackcommented, Feb 1, 2017

@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 of 0.7 Safari ridiculously returns "0.699999988079071". So to fix this, we could use Chai’s approximately assert:

assert.approximately(parseFloat($('.links').css('opacity')), 0.7, 0.1, 'message: ....');

where 0.7 is the expected value, and 0.1 is the +/- delta.

This seems easy enough - should we open it up to Help Wanted / First Timers Only?

1reaction
Greenheartcommented, Feb 2, 2017

@systimotic It could be, but it seems more like Safari has some funky math for getting/setting some css values.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found