v-bind
onlydata-text
does not seem to be received by theattr function
of: before
, and the display is corrupted.And for some reason, the css specification is not effective.
If i look at the following image, you can see the actual behavior (this is a 6plus chrome).
Mobile display:
For some reason, the text before the pseudo-element is not displayed, andfont-size
is also scattered.
Display on PC:
He/she is working as expected.
And the background written in the same code in
displayed after this title screen is displayed without any problem.
No error, and no matter how many times I reviewed the code myself, I couldn't find anything strange.
Please give me your help if you like.
Unrelated parts have been removed.
By the way, Vue'smixin
is for vh settings for mobile browsers, andinclude
in Sass istext-shadow
Centered code usingflexbox
.
I will paste the code of
that is displayed normally.
If it is included in the question text, it will be too long, so please excuse me with the github link.
https: // github.com/taku-hu/my-portfolio-site/blob/master/src/components/Header.vue
The following code is the code of the title screen inapp.vue
displayed at the beginning.
<template>
<transition name = "switch" mode = "out-in">
<p v-for = "sentence in bgSentences": key = "sentence">
<span: data-text = "sentence">{{sentence}}</span><!-* applicable section->
</p>
{{title}}
<header-component />
<transition name = "switch">
<router-view />
</transition>
<footer-component />
</transition>
</template>
export default {
name: 'App',
mixins: [mobileBrowser],
data () {
return {
bgSentences: [
'Appropriate string for background', // This will be followed by 30 or so.],
};
},
components: {
HeaderComponent,
FooterComponent
}
};
</script>
html {
font-size: calc (62.5% + 0.5vw);
}
body {
font-family: 'Hiragino Kaku Gothic Pro', 'Hiragino Kaku Go Pro W3', 'Meirio',
Meiryo, 'MS P Gothic', sans-serif;
}
#app {
@include center-styling;
text-align: center;
overflow: hidden;
.title-call {
@include center-styling;
position: relative;
width: 100%;
height: calc (var (-vh, 1vh) * 100);
background-color: rgb (15, 54, 167);
background-image: linear-gradient (90deg, rgba (15, 54, 167, 1) 40%, rgba (0, 163, 254, 1) 100%);
overflow: hidden;
.background {
position: absolute;
top: 0;
left: 0;
white-space: nowrap;
user-select: none;
p {
font-size: 1rem;
color: rgba (255, 255, 255, 0.3);
transition: 0.5s;
overflow: hidden;
border-bottom: 1px solid rgba (255, 255, 255, 0.12);
span {
position: relative;
display: inline-block;
padding: 5px 0 5px 5px;
letter-spacing: 1px;
&: before {
content: attr (data-text);// *position: absolute;
top: 0;
left: -100%;
padding: 5px 0 5px 5px;
}
}
&: nth-child (odd) span {
animation: slide 20s linear infinite;
}
&: nth-child (even) span {
animation: slide-reverse 20s linear infinite;
}
} // p
} //.background
h1 {
@include txt-neon-shadow;
font-family: 'Orbitron', sans-serif;
font-size: 5rem;
font-weight: bold;
color: #fff;
}
} //.title-call
.contents {
@include center-styling;
width: 100%;
section {
@include center-styling;
width: 100%;
}
a {
text-decoration: none;
}
} //.contents
} // # app
// Slide animation for background
@keyframes slide {
0% {
transform: translateX (100%);
}
100% {
transform: translateX (0);
}
}
@keyframes slide-reverse {
0% {
transform: translateX (0);
}
100% {
transform: translateX (100%);
}
}
-
Answer # 1
Related articles
- [javascript] [php? ] i want to add a disabled attribute to the input tag created by php after clicking
- when i try to get custom data in javascript, it becomes nul
- javascript - i want to send a custom emoji with discordjs
- javascript - there is no value in the onclick attribute of the "input" element created by createelement
- javascript - i want to use a custom directive to indicate the license
- javascript - i want to use a custom element of
- javascript or typescript custom event
- php - cannot load javascript on individual page of custom post
- javascript - i want to get only cookies with secure attribute
- javascript value property and value attribute difference
- how to get the changing id attribute of rails with javascript
- to specify multiple deta attribute values and have them be recognized by javascript
- how to add thymeleaf attribute in javascript
- javascript : How do I capitalize the first and last letter?
- javascript : Select value in select
- javascript - i can't confirm that the action in vuex is called in the test of axios communication using jest of vuejs
- javascript - vuejs view is not displayed
- javascript - [vue laravel] i want to set a login user id for the data pushed by axios
- javascript : To make a props mutable in the genus. component changed and in child component Vue js
- javascript : Error that at least one rule should be set when using vue-loader
- javascript : How to combine two projects, frontend and backend into one to deploy to the server in one file
- javascript : I want to change the variables in the template in real time
- javascript : VueJs. Managing page title and meta data
z-index
withposition: absolute
specified inh1
in.title-call
In the place surrounded bydiv
that is stretched to the full screen that is higher than.background
, it will be displayed normally on the mobile browser, and it has been resolved.However, the code of the background part where the important
v-bind
did not work is not played at all, and if there is nodiv
, why is the PC OK and mobile Then I didn't understand why it was wrong or how it related to Vue's behavior.Thank you all for your comments.