fix(infrastructure): Ensure grid pattern renders correctly in IE #2729
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
```bash
export CBT_USERNAME='...'
export CBT_AUTHKEY='...'
export MDC_GCLOUD_SERVICE_ACCOUNT_KEY_FILE_PATH='...'
npm run screenshot:build
npm run screenshot:test
echo '.mdc-button:not(:disabled){color:red}' >> packages/mdc-button/mdc-button.scss
echo '.mdc-button:disabled{margin-left:10px}' >> packages/mdc-button/mdc-button.scss
npm run screenshot:build
npm run screenshot:test -- --mdc-include-url=button/classes/ --mdc-include-browser=ie@11
```
- Uses PNG `background-image` instead of `linear-gradient`
- Adds Webpack loader `base64-inline-loader` to base64-encode `data:` URIs from background images in Sass
IE occasionally renders the `linear-gradient` version incorrectly, shifting it 1px to the left, which generates noisy, flaky diffs.
patrickrodee
requested changes
May 10, 2018
test/screenshot/fixture.scss
Outdated
| linear-gradient(to bottom, #{$test-ruler-color} 1px, transparent 1.01px); // fraction for IE 11 | ||
|
|
||
| background-size: #{$test-ruler-granularity} #{$test-ruler-granularity}; | ||
| background-image: url("images/ruler-grid.png"); |
There was a problem hiding this comment.
Inline the base64 image so you can drop the b64 webpack dependency
There was a problem hiding this comment.
Done - good call 😄
Codecov Report
@@ Coverage Diff @@
## master #2729 +/- ##
=======================================
Coverage 98.48% 98.48%
=======================================
Files 98 98
Lines 4230 4230
Branches 537 537
=======================================
Hits 4166 4166
Misses 64 64
Continue to review full report at Codecov.
|
patrickrodee
approved these changes
May 11, 2018
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
How to test
What it does
background-imageinstead oflinear-gradientbase64-inline-loaderto base64-encodedata:URIs from background images in SassIE occasionally renders the
linear-gradientversion incorrectly, shifting it 1px to the left, which generates noisy, flaky diffs.