This spotlight effect is not working in Safari 7.1+
Turns out that to fix the issue at hand, I had to change the "spread" in the box-shadow to be 1900px
instead of 2000px
. Not in any way shape or form sure why, but that at least fixed it on my version of Safari. Will check version 8 and some others and hope that fixes it.
Just wanted to add the snippit of code in case this could halp anybody
.spotlight{
cursor:none;
position:absolute;
top:24%;
left:7%;
height:20%;
width:17%;
border-radius:50%;
background:transparent;
box-shadow:0 0 0 1900px rgba(0,0,0,.65);
z-index: 2;
}
My banner is not visible in Safari 5.1.7
The first issue is you are using vh
units for that element. Unfortunately, Safari didn't support vh
and vw
units until Version 6 (unprefixed in Version 6.1).
The second issue is that you are using the background: 50% 50% / cover;
property-value pair. That is also not a supported value in Safari 5.1.7. You need to remove the / cover
bit for it to work in Safari 5.1.7. Safari 5.1.7 should support background-size: cover;
, but it seems like it doesn't support the shorthand version you're trying to use here.
Using these values will fix it, more or less:
.slide, .slide::before {
background: 50% 50%;
}
.slide {
padding: 15%;
min-height: 100%;
width: 100%;
}
With that being said, this shouldn't be an issue, because people who use Safari as their main browser will probably be on OS X, which means they'll be on a newer version of Safari. It's unlikely anyone will be using Safari on Windows for their main browser. Then again, it's possible, considering there are still Opera 12 users out there...
Safari Ajax cors request not following redirect
Well it looks like this is a Safari thing, it will only follow the first redirect. Apple claims that this is the way the HTML spec is written. So.... Had to rework my flow to not redirect on /user/login
and start the oauth process right away.
Updating php version on mac
Use Homebrew:
I would probably recommend installing homebrew to manage such installations for you. With that installed you can just run the following command to install php7.1
brew update
brew install php@71
Different ESLint results when building React app
I'm afraid you are running two instances of ESLint with different configs for each, let me explain why.
Create React App ESLint
CRA already sets up ESLint (among other things) for you:
Under the hood, we use webpack, Babel, ESLint, and other amazing projects to power your app.
In CRA, ESLint is installed and run internally when you run start
or build
commands, so you see the output in the console while you develop the app, or build the final bundle. You can also get the lint output in your editor. CRA already includes a default config for ESLint, including several plugins.
Your project ESLint
You have installed ESLint individually in your project, and set it up within your own .eslintrc.json
. That's absolutely fine! This is the usual way to lint your projects. The way you run this ESLint is by the lint
command you added to your scripts.
So when you run start
or build
, you are linting your project with CRA's ESLint instance and config, but when you run lint
you are linting your project with your ESLint instance and config. Their configs don't match 100%, hence the different errors reported.
You can check you have two instances of ESLint installed by running npm ls eslint
, you'll see something like this:
There you can see a direct eslint
dependency (the one you manually installed), and another eslint
which belongs to react-scripts
(the one installed as sub-dependency by CRA).
How can you solve this?
You have two options basically:
- Remove your ESLint and customize CRA ESLint. You could uninstall your
eslint
dependency from your project, remove your custom.eslintrc.json
, and extend CRA ESLint config. That has to be done through theeslintConfig
key in yourpackage.json
. You wouldn't need to put there everything you had in your.eslintrc.json
since most of it is already covered by CRA config. The downside of this option is that 1) you can't lint your code on demand with thenpm run lint
since CRA doesn't allow you to do so, and 2) you are tied to the ESLint plugins version used by CRA (e.g. they are usingeslint-plugin-testing-library
v3, but the latest is v5 and you can't use it). - Ignore ESLint from CRA (recommended). This is what I usually do. You can opt-out of the CRA built-in ESLint instance. To do this, you need to create a
.env
file in the root of your project, and then putDISABLE_ESLINT_PLUGIN=true
inside. After that, CRA won't lint your code when runningstart
orbuild
, so it's up to you when to lint it with yourlint
command. Ideally, you'll run thelint
command in your CI, and locally every time you commit files with lint-staged (this might not sound familiar to you, let me know if you need help to set up any of these), besides getting instant feedback of ESLint errors through your code editor (it should be really straightforward to set VSCode or WebStorm up to do so).
I hope this helps you, let me know if there is something else you want to discuss!
Related Topics
How to Make a Series of <P> Elements Display Horizontally
Preventing a <Pre> from Wrapping Inside of a Table
Cross-Browser CSS for Left Align and Right Align on The Same Line
How to Test @Media Print with Protractor or Selenium
Why Is My CSS Class Style Not Applying to Specific <Li>'s
Svg Datauri in CSS Not Working in Firefox
CSS Animation Keyframes with Display None Works to Fade In, But Not Fade Out
Equal Height Columns and Vertical Align Image in Column
Why Do H1 Tags Not Need a Class or Id in The CSS
Viewport-Unit Font-Size and Zooming Bug: Which Browsers Are Affected
Page Scroll Under Position: Fixed Content
Ie11 Blurry Right Hand Edge of Div with Border-Radius
Chrome Is Now Blurring Text When Using Transform Translatey with Percent
Add Ancestor Selector in Current SASS Nesting
CSS Targetting The Last of a Class Type That Isn't The Last-Child